<!-- 红包 -->
<template>
    <div class="main">
        <p class="tips">广告</p>
        <header v-show="show1">
            <p>恭喜获得红包</p>
            <p><span>最高</span>99元</p>
        </header>
        <div class="top" v-show="show1">
            <img src="../assets/img/交叉-123.png" alt="">
        </div>
        <div class="open" v-show="show1">
            <img src="../assets/img/开.png" alt="" @click="open">
        </div>
        <div class="hand" v-show="show1">
            <p>🖕</p>
        </div>
        <div class="opack" v-show="show2">
            <img src="../assets/img/路径-12605.png" alt="">
        </div>
        <div class="opack1" v-show="show2">
            <div>
                <p>- 恭喜你获得 -</p>
                <p>0.01元优惠券</p>
            </div>
            <img src="../assets/img/组-13273.png" alt="">
            <button><a href="https://g.wan.2345.com/s/1/1254/2557.html?frm=wzdh-kz-23xbyl1&referer=wzdh"
                    target="_blank">立即领取</a></button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            show1: true,
            show2: false
        }
    },
    methods: {
        open() {
            setTimeout(() => {
                document.querySelector(".open").style.animationPlayState = "running"
                setTimeout(() => {
                    this.show1 = false
                    this.show2 = true
                }, 2000);
            }, 500);
        }
    }
}
</script>

<style lang="less" scoped>
.main {
    width: 350px;
    height: 450px;
    background: url("../assets/img/矩形-13035.png") no-repeat;
    background-size: contain;
    position: relative;
    padding: 10px;

    .tips {
        color: #888;
        position: absolute;
        right: 30px;
        top: 0;
        font-size: .85rem;
    }

    header {
        position: relative;
        z-index: 99;
        width: 60%;
        margin: 26px auto;

        p {
            text-align: center;
            color: whitesmoke;
            font-size: 1.7rem;
            margin: 10px 0;
        }

        p:nth-child(2) {
            position: relative;

            span {
                font-size: 0.8rem;
                margin-right: 8px;
                padding: 4px 0px;
                color: rgb(239, 237, 237);
                border-radius: 12px;
            }

            &::after {
                content: "限时";
                display: block;
                position: absolute;
                right: 0;
                top: 0;
                margin-left: 20px;
                font-size: 0.8rem;
                background-color: rgba(255, 0, 237, 0.8);
                padding: 4px 10px;
                border-radius: 14px;
            }
        }
    }

    .top {
        position: absolute;
        top: -42%;
        left: 0;
        z-index: 10;
        transform: scale(0.8);

        img {
            width: 100%;
        }
    }

    .open {
        position: absolute;
        z-index: 99;
        top: 34%;
        left: 0;
        right: 0;
        margin: auto;
        width: 120px;
        transition: all 0.2s;

        &:active {
            opacity: 0.8;
        }

        img {
            width: 100%;
        }

        animation: moveOpen 0.8s infinite alternate ease-in-out;
        animation-play-state: paused;

        @keyframes moveOpen {
            from {
                transform: rotate3d(0, 1, 0, 0deg);
            }

            to {
                transform: rotate3d(0, 1, 0, 180deg);
            }
        }
    }

    .hand {
        position: absolute;
        z-index: 99;
        right: 26%;
        bottom: 36%;
        animation: moveHand 0.8s infinite alternate ease-in-out;

        @keyframes moveHand {
            from {
                transform: rotate(-45deg) translateY(0);
            }

            to {
                transform: rotate(-45deg) translateY(-20px);
            }
        }

        p {
            text-align: center;
            font-size: 3.5rem;
        }
    }

    .opack {
        position: absolute;
        bottom: 8%;
        left: 0;
        right: 0;
        margin: auto;
        width: 84%;
        z-index: 1;

        img {
            width: 100%;
        }
    }

    .opack1 {
        position: absolute;
        bottom: 4%;
        left: 0;
        right: 0;
        margin: auto;
        width: 90%;
        animation: move3 1s;

        @keyframes move3 {
            from {
                transform: translateY(40px);
            }

            to {
                transform: translateY(0);
            }
        }

        img {
            width: 100%;
        }

        div {
            position: absolute;
            top: 0;
            width: 100%;
            padding: 20px 0;

            p:nth-child(1) {
                font-size: 1.1rem;
                margin: 18px 0;
            }

            p {
                color: var(--lBg);
                font-size: 1.6rem;
                text-align: center;

            }
        }

        button {
            position: absolute;
            bottom: 26%;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 99;
            width: 190px;
            padding: 10px 0;
            border-radius: 18px;
            border: 0;
            background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
            ;

            &:active {
                opacity: 0.8;
            }

            a {
                color: #c61509;
            }
        }
    }
}
.van-popup{
    overflow: hidden;
}
</style>